How To Add Custom Header To WordPress Theme Without Breaking It
September 15th, 2016 | by Ravi Chahar || 2 Comments |
WordPress theme development consists many things to look upon. When someone lands on your website then the first thing to notice is the header of the website.
Do you want to create an attractive header? Do you know how to add custom header to WordPress theme? You can add any image as your custom header image.
In this post, I am going to walk you through the process of adding the theme support option for the custom header image. You would be able to choose the image from your WordPress admin area.
Add Custom Header to WordPress Theme By Adding The Theme Support Option
You may have noticed that the WordPress themes consist the customizer from where you can change the tagline, add favicon, and many other things.
Does your theme have an option to add the header image? You would be happy to know that you can easily add the theme support option for the header image.
First of all, let me guide to the code which adds the header section to the WordPress theme.
This three words code will show the header section in your WordPress theme. You can design it using the CSS.
Which Code Would Add The Header Theme Support
In the WordPress theme development directory, you would get the code like.
Add this line of code in the functions.php file of your theme and save. It will show an option to add the header image in the customizer. But how would it pick up the images and store in the database?
As mentioned at the WordPress developer’s page that you can use the default arguments for the custom header.
But I am not going to show you those values. Instead of that, I am going to provide you the code which would pick up the header image you add from the customizer.
<a href=”<?php echo home_url(); ?>”>
<img src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height; ?>” width=”<?php echo get_custom_header()->width; ?>” alt=”” id=”” />
</a>
In this code, I have linked the header image to the home page of the website so that when someone clicks on the header image then they would reach the homepage. It doesn’t matter whether you choose a static homepage or the list of the blog posts.
You can choose your own “alt” text and the “ID” for the image to target in the CSS.
The “height” and the “width” is added dynamically to pick up for the custom header. You don’t need to dwell into the PHP coding for this.
Though you can add a few extra codes to add the default size for the header image. But, it would be better if you use the CSS.
It’s because while writing the PHP codes with the WordPress functions, you may make some mistakes. But CSS is an easy language and you can adjust the height and width of the custom header image using it.
How Can You Setup Custom Image When You Add Custom Header To WordPress Theme
As I have mentioned above that you can target the header image using the CSS “ID” but still if you want to add an image using the PHP code then create an image and place it along with all the theme files.
It’s because you have to pass the path to this image to use as the default header image.
&args = array(
‘width’ => 920,
‘height’ => 70,
‘default-image’ => get_template_directory_uri() . ‘/header.jpg’,
);
add_theme_support( ‘custom-header’, $args );
This code will pick up the header image you have placed in the folder of the theme. There are many other things which can be done with the custom header.
If you try to use all the codes then it would be confusing. So to add custom header to WordPress theme it would be better to use the code mentioned at the top.
The theme support option and the code which let you handle the width and height of the image using the CSS.
Would You Use CSS or PHP To Add Custom header To WordPress Theme
What would you prefer? CSS or PHP to set the dimensions of the header image. Well, from my point of view the best option is to add the theme support option and then the code so that WordPress would pick up the images you add from the customizer.
After that, use the ID or the class of the header image and set the width and the height. This option has the minimum number of chances for the mistakes and effective to use.
Nowadays, you can even add more than one header images. WordPress has an option using which you can set the random appearance of the header image.
If you face any problem when you add custom header to WordPress theme then feel free to ask.
Related Posts
2 comments
Leave a Reply
Oh yeah! This is great, Ravi!
Being a Genesis user, I like to code my headers using Simple Hooks. However, you’re showing us an even better way IF ya don’t mind getting down and dirty with coding. ?
Thanks for sharing this. I’m saving it for later reference.
B
Hey Bren,
When you use the Genesis framework then it’s easier to add new things because of the hooks and the widgets. But’s always the best idea to create your own codes.
You can add the theme support option for the header image. But you have to do a little bit of CSS coding to adjust the header image.
Thanks for stopping by.
~Ravi